<template>
  <WebGLCanvas :id="id"/>
</template>

<script setup lang="ts">
  import { vertexShaderSource, fragmentShaderSource } from "~/composables/webgl/webgl-shaders-and-glsl"

  const id = 'webgl-shaders-and-glsl'
  useHead({
    title: 'WebGL 着色器和GLSL'
  })

  onMounted(() => {
    const { gl, program } = useWebGLEngine(
      'webgl-shaders-and-glsl',
      vertexShaderSource,
      fragmentShaderSource
    )
    
    // 从刚才创建的GLSL着色程序中找到这个属性值所在的位置以及颜色
    const positionAttributeLocation = gl.getAttribLocation(program, 'a_position')
    const colorAttributeLocation = gl.getAttribLocation(program, 'a_color')
    // 属性值从缓冲中获取数据，所以我们创建一个缓冲
    const positionBuffer = gl.createBuffer()
    // 绑定位置信息缓冲
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
    
    // 创建一个三角形
    const positions = [
      0, 0,
      -0.5, 0.5,
      -0.5, -0.5,
      0, 0,
      0.5, 0.5,
      0.5, -0.5
    ]
    // WebGL需要强类型数据 所以使用`Float32Array`
    // `bufferData`作用 复制这些数据到GPU的`positionBuffer`对象上
    // `STATIC_DRAW` 提示WebGL我们不会经常改变这些数据
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)

    // 告诉WebGL怎么从我们之前准备的缓冲中获取数据给着色器中的属性。 
    // 首先我们需要启用对应属性
    gl.enableVertexAttribArray(positionAttributeLocation)
    

    // 指定从缓冲中读取数据的方式
    // 告诉属性怎么从positionBuffer中读取数据 (ARRAY_BUFFER)
    const size = 2            // 每次迭代运行提取两个单位数据
    const type = gl.FLOAT     // 每个单位的数据类型是32位浮点型
    const normalize = false   // 不需要归一化数据
    const stride = 0          //  0 = 移动单位数量 * 每个单位占用内存（sizeof(type)）
                              // 每次迭代运行运动多少内存到下一个数据开始点
    const offset = 0          // 从缓冲起始位置开始读取
    gl.vertexAttribPointer(
      positionAttributeLocation,
      size,
      type,
      normalize,
      stride,
      offset
    )

    const colorBuffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      Math.random(), Math.random(), Math.random(), 1,
      Math.random(), Math.random(), Math.random(), 1,
      Math.random(), Math.random(), Math.random(), 1,
      Math.random(), Math.random(), Math.random(), 1,
      Math.random(), Math.random(), Math.random(), 1,
      Math.random(), Math.random(), Math.random(), 1,
    ]), gl.STATIC_DRAW)
    gl.enableVertexAttribArray(colorAttributeLocation)

    gl.vertexAttribPointer(
      colorAttributeLocation,
      4,
      type,
      normalize,
      stride,
      offset
    )

    // 让WebGL运行我们的GLSL着色程序
    gl.drawArrays(gl.TRIANGLES, 0, 6)
  })
</script>